<template>
  <n-space :vertical="true" :size="16">
    <top-chart />
    <data-card />
    <bottom-part />
    <nav-card :loading="loading" />
  </n-space>
</template>

<script setup lang="ts">
import { onActivated, onMounted } from 'vue'
import { DataCard, NavCard, TopChart, BottomPart } from './components'
import { useLoading } from '@/hooks'

const { loading, startLoading, endLoading } = useLoading()
function handleEndLoading() {
  startLoading()
  setTimeout(() => {
    endLoading()
  }, 1000)
}
// 只有组件实例是 <KeepAlive> 缓存树的一部分时，当组件被插入到 DOM 中时调用 onActivated 钩子
onActivated(() => {
  // handleEndLoading()
})
onMounted(() => {
  handleEndLoading()
})
</script>

<style scoped></style>
